import React, { useRef, useState } from 'react';
import {
  Dropdown,
  InfiniteScroll,
  Button,
  List,
  DotLoading,
  Tabs,
  SideBar,
  Selector,
  CheckList,
} from 'antd-mobile';
import { SearchOutline } from 'antd-mobile-icons';
import './index.less';
import { mockRequest } from './mock-request';
import { areaList } from '@vant/area-data';
import { DropdownMenu, Area } from 'react-vant';
export default () => {
  let dorpDownRef = useRef(null);
  //
  const [value, setValue] = useState<Record<string, string | number>>({});

  // 选择城市
  const [city, setCity] = useState('');

  const changeCity = (v: any) => {
    let cid = v[2];
    console.log(cid);
    if (cid) {
      console.log(areaList.county_list[cid]);
      let city = areaList.county_list[cid];
      setCity(city);
      dorpDownRef.current.close();
    }
  };
  // 筛选
  const [seli, setSeli] = useState([]);
  const [serve, setServe] = useState('');

  const option1 = [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
  ];
  const option2 = [
    { text: '综合排序', value: 'a' },
    { text: '喜欢最多', value: 'b' },
    { text: '作品最多', value: 'c' },
    { text: '好评优先', value: 'd' },
  ];

  const [data, setData] = useState([
    {
      id: '1',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
    {
      id: '2',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
    {
      id: '3',
      pic: '/保定华纳婚纱摄影.jpg',
      name: '保定华纳婚纱摄影',
    },
    {
      id: '4',
      pic: '/莫林影像.jpg',
      name: '莫林影像',
    },
  ]);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    const append = await mockRequest();
    console.log(append);
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }

  const tabs = [
    {
      key: '北京',
      title: '北京',
      children: ['北京'],
    },
    {
      key: '天津',
      title: '天津',
    },
    {
      key: '河北',
      title: '河北',
    },
  ];
  // 筛选 选项
  const options = [
    {
      label: '放心购商家',
      description: '交易更有保障',
      value: '1',
    },
    {
      label: '高等级商家',
      description: '银牌及以上等级商家',
      value: '2',
    },
  ];
  // 上拉加载
  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <DotLoading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    );
  };
  return (
    <div>
      {/* 筛选 */}
      <div className="fixsel">
        <DropdownMenu
          value={value}
          style={{
            '--rv-dropdown-menu-title-active-text-color': 'red',
            '--rv-dropdown-menu-option-active-color': 'red',
          }}
          ref={dorpDownRef}
          onChange={(v) => setValue(v)}
        >
          <DropdownMenu.Item
            name="value1"
            title={city == '' ? '选择城市' : city}
          >
            <Area
              areaList={areaList}
              onConfirm={(v) => {
                changeCity(v);
              }}
            />
          </DropdownMenu.Item>
          <DropdownMenu.Item name="value2" options={option2} />
          <DropdownMenu.Item name="value3" title={serve == '' ? '筛选' : serve}>
            <p
              className="titp"
              style={{ textAlign: 'left', padding: '0.1rem 0 0 0.2rem' }}
            >
              服务与保障（可多选）
            </p>
            <Selector
              columns={2}
              style={{
                borderRadius: '0.2rem',
                '--border-radius': '0.2rem',
                '--checked-color': 'white',
                '--checked-text-color': 'red',
                '--checked-border': '1px solid red',
                padding: '0 0.2rem',
              }}
              multiple={true}
              onChange={(value) => {
                setSeli(value);
              }}
              options={[
                {
                  label: '放心购商家',
                  description: '交易更有保障',
                  value: '放心购商家',
                },
                {
                  label: '高等级商家',
                  description: '银牌及以上等级商家',
                  value: '高等级商家',
                },
              ]}
            />
            <Button
              className="subbtn"
              onClick={() => {
                let tit = seli.join(',');
                dorpDownRef.current.close();
                setServe(tit);
              }}
            >
              确定
            </Button>
          </DropdownMenu.Item>
        </DropdownMenu>
      </div>

      {/* 内容列表 */}
      <div className="content" style={{ paddingTop: '50px' }}>
        <img src={require('../img/报价单.jpg')} alt="" />
        <div className="store">
          <List>
            {data.map((item, index) => (
              <List.Item key={index}>
                <img src={require('../img' + item.pic)} alt="" />
                <span>wedding</span>
              </List.Item>
            ))}
          </List>
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
            <InfiniteScrollContent hasMore={hasMore} />
          </InfiniteScroll>
        </div>
      </div>
    </div>
  );
};
